<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>SpiderFlow</title>
		<script type="text/javascript" src="js/layui/layui.all.js" ></script>
		<script type="text/javascript" src="js/common.js" ></script>
		<script>$ = layui.$;</script>
		<script type="text/javascript" src="js/log-viewer.js" ></script>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			html,body{
				width : 100%;
				height : 100%;
				overflow: hidden;
			}
			html,body{
				overflow: hidden;
			}
			.log-container{
				width : 100%;
				position: absolute;
                top : 0px;
                bottom : 40px;
				overflow: auto;
				background-color: #000;
			}
            .toolbox-container{
                width : 100%;
                position: absolute;
                height : 24px;
                padding:8px 0;
                bottom : 0px;
                background: #3c3f41;
            }
            .toolbox-container .input-text{
                outline: 0;
                height: 24px;
                line-height: 24px;
                margin-left: 7px;
                background: #45494a;
                border: 1px solid #646464;
                width: 300px;
                color: #ddd;
                padding-left: 5px;
                font-size: 14px;
                float : left;
                margin-right: 20px;
            }
            .toolbox-container .input-text.search-finish{
                background: #743a3a;
            }
            .toolbox-container .input-checkbox{
                visibility: hidden;
            }
            .toolbox-container .input-checkbox +label{
                color : #c9c9c9;
                float : left;
                font-size:12px;
                height:24px;
                line-height: 24px;
                margin-left: 25px;
                margin-right:5px;
                user-select: none;
            }
            .toolbox-container .input-checkbox +label::before{
                display: inline-block;
                background: #43494a;
                border:1px solid #6b6b6b;
                content : '';
                width : 16px;
                height : 16px;
                line-height: 16px;
                position : absolute;
                top : 12px;
                margin-left:-22px;
            }
            .toolbox-container .input-checkbox:checked +label::before{
                display : inline-block;
                content : "\2714";
                text-align: center;
                font-size:12px;
                color:#fff;
            }
            .toolbox-container .btn{
                display: inline-block;
                width : 24px;
                height : 24px;
                border-radius: 2px;
                background-repeat: no-repeat;
                background-position: center center;
                background-image: url("");
                float : left;
                cursor: pointer;
            }
            .btn.btn-download{
                width : 48px;
                backgrond:none;
                font-size:12px;
                line-height: 24px;
                color : #ddd;
                background-image: none;
                padding : 0 5px;
                margin-left : 5px;
                background-color: #4c5052;
            }
            .btn.btn-prev{
                background-image: url("");
            }
            .btn.btn-next{
                background-image: url("");
            }
            .btn.btn-page-prev{
                background-image: url("");
            }
            .btn.btn-page-next{
                background-image: url("");
            }
            .btn.btn-page-home{
                background-image: url("");
            }
            .btn.btn-page-end{
                background-image: url("");
            }
            .toolbox-container .btn:hover{
                background-color: #4c5052;
            }
            ::-webkit-input-placeholder {
                color: #eee;
            }
			.log-row{
				font-family: Consolas,serif;
				font-size: 12px;
				line-height: 14px;
				height : 14px;
				white-space: pre;
				color: #e5e5e5;
				background: #000;
			}
			.log-row::selection{
				background: rgba(255,255,255,.998);
				color : #000;
			}
            .log-row em.search-finded{
                font-style: inherit;
                background :#ff0 !important;
                color : #000;
            }
            ::-webkit-scrollbar{
                width : 8px;
                height : 8px;
                background: transparent;
            }
            ::-webkit-scrollbar-track{
                border-radius: 2px;
            }
            ::-webkit-scrollbar-thumb{
                border-radius: 2px;
                background: #999;
            }
		</style>
	</head>
	<div class="log-container"></div>
    <div class="toolbox-container">
        <span class="btn btn-download" title="下载日志">下载日志</span>
        <input type="text" id="keywords" placeholder="请输入关键词搜索定位日志" class="input-text"/>
        <input type="checkbox" id="reversed" checked class="input-checkbox"/>
        <label for="reversed">反向搜索</label>
        <input type="checkbox" id="matchcase" checked class="input-checkbox"/>
        <label for="matchcase">区分大小写</label>
        <input type="checkbox" id="regx" class="input-checkbox"/>
        <label for="regx">正则搜索</label>
        <span class="btn btn-prev" title="上一个/上一行(↑)"></span>
        <span class="btn btn-next" title="下一个/下一行(↓)"></span>
        <span class="btn btn-page-prev" title="上一页(Page Up)"></span>
        <span class="btn btn-page-next" title="下一页(Page Down)"></span>
        <span class="btn btn-page-home" title="第一页/首页(Home)"></span>
        <span class="btn btn-page-end" title="最后一页/尾页(End)"></span>
    </div>
	<script type="text/javascript">
		$(function(){
		    var logId = getQueryString('id');
            var taskId = getQueryString('taskId');
			var viewer = new LogViewer({
				url: 'spider/log',
				maxLines : parseInt(($('.log-container').height() - 8) / 14),
				logId : logId,
                taskId: taskId,
				element : $('.log-container'),
                onSearchFinish : function(hasData){
				    if(hasData){
                        $('.input-text').removeClass('search-finish');
                    }else{
                        $('.input-text').addClass('search-finish').focus();
                    }
                },
                onLoad : function(hasData){
                    if(!hasData){
                        layui.layer.alert('暂无日志数据');
                    }
                }
			});
            var setOptions = function(){
                viewer.setOptions('keywords',$('.toolbox-container .input-text').val());
                viewer.setOptions('matchcase',$('#matchcase').is(':checked'));
                viewer.setOptions('regx',$('#regx').is(':checked'));
                viewer.setOptions('reversed',$('#reversed').is(':checked'));
            }
            var time;
            $('.toolbox-container').on('keydown','.input-text',function(e){
                setOptions();
                if(e.keyCode === 13){
                    viewer.search();
                }
                if(this.value === ''){
                    $(this).removeClass('search-finish');
                }
            }).on('change','.input-checkbox',function(){
                setOptions();
            }).on('click','.btn-prev',function(){
                if(viewer.keywords){
                    viewer.search(true);
                }else{
                    viewer.scroll(true,1);
                }
            }).on('click','.btn-next',function(){
                if(viewer.keywords){
                    viewer.search(false);
                }else{
                    viewer.scroll(false,1);
                }
            }).on('click','.btn-page-prev',function(){
                viewer.scroll(true,viewer.maxLines);
            }).on('click','.btn-page-next',function(){
                viewer.scroll(false,viewer.maxLines);
            }).on('click','.btn-page-home',function(){
                viewer.setOptions('reversed',false);
                viewer.init();
            }).on('click','.btn-page-end',function(){
                viewer.setOptions('reversed',true);
                viewer.init();
            }).on('click','.btn-download',function(){
                window.open('spider/log/download?id=' + logId + "&taskId=" + (taskId || ''));
            });
		});
	</script>
</html>